<template>
  <div class="EquipmentRepair-box">
    <div style="margin-left: 20px;margin-top: 20px;">
        <span class="RepairTitle">报修记录管理</span>
    </div>
    
    <div class="btn-toolbar" role="toolbar" style="height: 5%;margin-left: 5%;margin-top: 1%;width: 90%;">
        <form class="form-inline" role="form" style="position: inherit;top: 8%; left: 5px;">
            
            <div class="form-group" style="margin-right:15px;background-color: black;">
            <div class="select-group">
                <select class="form-control" v-model="recordParam.roomId">
                    <option>请选择所属教室</option>
                    <option v-for="room in roomList" :key="room.id" :value="room.id">
                        {{room.roomNo}}
                    </option>
                </select>
            </div>
            </div>

            <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">设备编号</div>
                <input class="form-control" type="text" v-model="recordParam.equipmentNo">
            </div>
            </div>
            
            <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">设备名</div>
                <input class="form-control" type="text" v-model="recordParam.equipmentName">
            </div>
            </div>

            <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">报修原因</div>
                <input class="form-control" type="text" placeholder="报修原因最长14位" v-model="recordParam.repairCause">
            </div>
            </div>

            <div class="form-group">
            <div class="input-group">
                <button class="btn btn-default" style="margin-left: 5px;" @click="createRepairRecord">新建报修记录</button>
            </div>
            </div>            
        </form>
    </div>
    <div class="list-group recordList-box" id="recordList">
        <transition name="list" v-for="repairRecord in equipmentRepairList" :key="repairRecord.repairId" appear>
            <li>
            <label class="list-group-item">
                <el-row :gutter="20">
                    <el-col :span="1">
                        <div class="grid-content">
                            <input class="form-check-input me-1" type="checkbox" :value="repairRecord.repairId" @click="isAllChecked()">                            
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-purple">
                            设备号:{{repairRecord.equipmentNo}}
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            设备名:{{repairRecord.equipmentName}}
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            所属教室:{{repairRecord.roomNo}}
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            报修原因:{{repairRecord.repairCause}}

                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div class="grid-content bg-purple">
                            报修时间:{{repairRecord.createTime}}
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content ">
                            <button class="recordDelete-btn" @click="deleteRecordById(repairRecord.repairId)">移除</button>                           
                        </div>
                    </el-col>
                </el-row>
            </label>
            </li>
        </transition>
    </div>
    <div class="deleteAll-box">
        <input type="checkbox" style="margin-left: 15px;margin-top: 10px;" :checked="isAll" @click="checkAll()"/>全选
        <button class="deleteAll-btn" @click="deleteSelectedRecord()">移除选中记录</button>
    </div>
    <el-button type="info" plain style="position:inherit;top:5px;right:5px" @click="downLoadFail" v-show="equipmentRepairList.length>0">导出报修列表（*.xls)<i class="el-icon-upload el-icon--right"></i></el-button>
  </div>
</template>

<script>
import debounce from 'lodash/debounce';
import axios from 'axios';
import {v4 as uuidv4} from 'uuid';
import $ from 'jquery';
import { mapState } from 'vuex';

export default {
    name:'EquipmentRepair',
    data(){
        return{
            isAll:false,
            recordParam:{
                equipmentNo:'',
                equipmentName:'',
                repairCause:'',
                roomId:''
            }
        }
    },
    computed:{
        ...mapState('equipmentRepair',['equipmentRepairList','roomList'])
    },
    methods:{
        // 删除单条记录
        deleteRecordById:debounce(function(id){
            this.$confirm(
                '此操作将会删除设备报修记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let ids=[];
                    ids.push(id);
                    this.$store.dispatch("equipmentRepair/deleteRepairReportByIds",ids);
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                }
            )
        }),
        // 删除选中设备保修列表数组
        deleteSelectedRecord:debounce(function(){
            this.$confirm(
                '此操作将会删除设备报修记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let checkArr=$("#recordList input[type=checkbox]:checked");
                    let ids=[];
                    $.each(checkArr,function(index,item){
                        ids.push(item.value)
                    })
                    this.$store.dispatch("equipmentRepair/deleteRepairReportByIds",ids)
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                }
            )
        }),
        //被动全选辅助函数
        isAllChecked(){
            if($("#recordList input[type=checkbox]:checked").length===$("#recordList input[type=checkbox]").length){
                this.isAll=true;
            }else{
                this.isAll=false;
            }
        },
        //全选&取消全选
        checkAll(){
            this.isAll=!this.isAll;
            $("#recordList input[type=checkbox]").prop("checked",this.isAll)
        },
        //创建报修记录
        createRepairRecord:debounce(function(){
            //提交前校验数据格式
            //故障原因应简短不超过八个字符，不符合要求则不予以提交
            if(this.recordParam.repairCause.length>=14){
                this.$notify({
                    title: '警告',
                    message: '报修原因长度应小于14位',
                    type: 'warning'
                });
                return;
            }
            if(this.recordParam.equipmentNo===''||this.recordParam.equipmentName===''||
            this.recordParam.repairCause===''||this.recordParam.roomId===''){
                this.$notify({
                    title: '警告',
                    message:'请检查相关输入是否有空缺',
                    type: 'warning'
                });
                return;
            }
            let obj=Object.assign(this.recordParam,{'repairId':uuidv4().slice(0,-4)})
            this.$store.dispatch("equipmentRepair/insertRepairReport",obj)
        }),
        //将报修记录下载为本地文件
        downLoadFail: function () {
            const config = {
                method: 'get',
                url: 'serviceCustomer/api/equipment/downFileByRepairRecord',
                headers: {
                    'ContentType' : 'application/json'
                },
                responseType: 'blob'
            };
            axios(config).then(response => {
                const url = window.URL.createObjectURL(new Blob([response.data]));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'RepairStatistics.xls');
                document.body.appendChild(link);
                link.click();
            })
        }
    },
    mounted(){
        this.$store.dispatch('equipmentRepair/getEquipmentRepairList')
    }
}
</script>

<style scoped lang="css">
    .EquipmentRepair-box{
        position:inherit;
            top:0;
            height:100%;
            left:0;
            width:100%;
            overflow: auto;
    }
    .RepairTitle{
        font-size: 30px;
        font-family: '微软雅黑';
        font-weight: 800;
    } 
    .recordList-box{
        position:inherit;
        height:60%;
        width: 90%;
        left: 5%;
        margin-top: 5%;
        overflow: auto;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        border-radius: 10px;
    }
    .recordDelete-btn{
        float: right;
        right: 10px;
        background-color: rgba(0,0,0,0);
        border-radius: 10px;
        width: 100%;
    }
    .deleteAll-box{
        position: inherit;
        top: 90%;
        left: 5%;
        height:5%;
        width:90%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        border-radius: 10px;
    }
    .deleteAll-btn{
        position: inherit;
        font-size: 50%;
        top: 10%;
        margin-left: 70%;
        background-color:#D43F3A;
        border-radius: 10px;
        height: 80%;
        width: 20%;
    }
    li{
        list-style: none;
    }
    @keyframes slide {
        from{
            transform: translateX(100%)
        }
        to{
            transform: translateX(0);
        }
    }
    @keyframes leave {
        from{
            transform: translateX(0);
        }
        to{
            transform: translateX(100%);
        }
    }
    .list-enter-active{
        animation: slide 0.75s 
    }
    .list-leave-active{
        animation: leave 0.75s
    }
    .el-row {
        margin-bottom: 20px;
    }
    .el-row:last-child {
        margin-bottom: 0;
        }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 25px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>